<template>
  <div class="pdf-viewer-page">
    <jvsPdfViewer v-if="pdfUrl" :pdf="pdfUrl" :idConfig="idConfig" :config="pdfOptions" @pages-rendered="pagesRendered"></jvsPdfViewer>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch ,
  onMounted,
  getCurrentInstance,
  onBeforeUnmount
} from 'vue' 
import { jvsPdfViewer } from 'jvs-pdf-app'
import 'jvs-pdf-app/lib/style.css'
import { useHookI18n } from '@/hooks/i18n'
const { locale,$t } = useHookI18n()
const emit = defineEmits(["renderFinish"])
const props = defineProps({
  pdfUrl: {
    type: String,
    default: ''
  },
  printTitle:{
    type:String,
    default: ' '
  }
})

const idConfig = ref({
  printType:'iframe',
  printTitle:props.printTitle,
  viewOnLoad:1,
  isScrollTop:false
  // language:locale.value=='en'?'en-US':locale.value
})
const pdfOptions = ref({
  sidebar:{
    viewOutline: false,
    viewAttachments: false,
    viewLayers: false
  },
  secondaryToolbar:{
    secondaryOpenFile:false,
    secondaryPrint:false,
    secondaryDownload:false
  },
  toolbar:{
    toolbarViewerRight: {
      // secondaryToolbarToggle:false,
      download:false,
      editorHighlight:false,
      editorFreeText:false,
      editorInk:false,
      editorStamp:false,
    },
  }
})
function pagesRendered(){
  emit('renderFinish')
}
onMounted(()=>{
  idConfig.value.language = locale.value=='en'?'en-US':locale.value
  delete Array.prototype.pipeline
})
onBeforeUnmount(()=>{
  localStorage.removeItem('pdfjs.history')
  Array.prototype.pipeline = async function(callback){
    if (null === this || 'undefined' === typeof this) {
      // At the moment all modern browsers, that support strict mode, have
      // native implementation of Array.prototype.reduce. For instance, IE8
      // does not support strict mode, so this check is actually useless.
      throw new TypeError(
        'Array.prototype.pipeline called on null or undefined');
    }
    if ('function' !== typeof callback) {
      throw new TypeError(callback + ' is not a function');
    }
    var index, value,
      length = this.length >>> 0;
    for (index = 0; length > index; ++index) {
      value = await callback(value, this[index], index, this);
    }
    return value;
  }
})
</script>
<style lang="scss" scoped>
.pdf-viewer-page{
  width: 100%;
  height: 100%;
}
</style>
<style lang="scss">
.jvs-pdf-app{
  .toolbar{
    z-index: 2000 !important;
  }
  .pdfViewer .page {
    box-sizing: content-box !important;
  }
}
.jvs-pdf-app #thumbnailView{
  width: calc(100% - 0px) !important;
  .thumbnail{
    box-sizing: content-box;
    margin: 0px 0px 5px 5px !important;
  }
}
.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor) .editToolbar .buttons .delete{
  line-height: 1 !important;
  &::before{
    display: block !important;
  }
}
</style>